<template>
    <!-- 新建任务 -->
    <div id="newTask-management-container">
        <el-container id="newTask-container">
            <el-header id="newTask-header">
                <div class="header-content" id="newTask-header-content">
                    <div class="left-content" id="newTask-left-content">
                        <div class="div-icon" id="newTask-icon"></div>
                        <samp id="newTask-basic-info">基本信息</samp>
                    </div>
                    <div class="buttons-right" id="newTask-buttons-right">
                        <el-button type="primary" @click="submit" id="newTask-submit-btn">提交</el-button>
                        <el-button plain @click="$router.go(-1)" id="newTask-close-btn">关闭</el-button>
                    </div>
                </div>
            </el-header>
            <el-main id="newTask-main">
                <div class="form-container" id="newTask-form-container">
                    <el-form
                        id="newTask-form"
                        ref="FormRef"
                        class="form-frame"
                        :model="newfrom"
                        :rules="rules"
                        label-width="auto"
                    >
                        <el-form-item label="创建人：" id="newTask-creator">
                            <p id="newTask-creator-name">{{ name ? name : "没有真实姓名请去填写个人信息" }}</p>
                        </el-form-item>
                        <el-form-item label="创建时间：" id="newTask-create-time">
                            <p id="newTask-create-time-display">{{ formattedDate }}</p>
                        </el-form-item>
                        <el-form-item label="任务名称：" prop="title" id="newTask-task-name">
                            <el-input 
                                id="newTask-task-name-input"
                                v-model="newfrom.title"
                                placeholder="输入任务名称"
                            />
                        </el-form-item>
                        <el-form-item label="任务内容：" prop="content" id="newTask-task-content">
                            <el-input
                                id="newTask-task-content-input"
                                v-model="newfrom.content"
                                type="textarea"
                                placeholder="输入任务内容"
                            />
                        </el-form-item>
                        <el-form-item label="任务要求：" id="newTask-task-requirements">
                            <el-input  
                                id="newTask-task-requirements-input"
                                type="textarea"
                                placeholder="输入任务要求"
                                v-model="newfrom.require"
                            />
                        </el-form-item>
                        <el-form-item label="截止时间：" required id="newTask-due-date">
                            <el-date-picker
                                id="newTask-due-date-picker"
                                v-model="newfrom.endTime"
                                type="datetime"
                                placeholder="选择截止日期"
                                clearable
                                :disabledDate="beforeToday"
                                value-format="x"
                            />
                        </el-form-item>
                        <!-- 文件上传 -->
                        <el-form-item label="附件：" id="newTask-upload-limit">
                            <el-upload
                                id="newTask-upload"
                                ref="newUupload"
                                v-model:file-list="fileList"
                                :on-exceed="handleExceed"
                                :limit="1"
                                :on-change="fileUpload"
                                :auto-upload="false"
                                :before-remove="beforeRemove"
                            >
                                <el-button id="newTask-upload-btn" type="primary" plain>
                                    <el-icon style="font-size: 25px;margin-right: 15px;"><UploadFilled /></el-icon>上传
                                </el-button>
                                <template #tip>
                                    <div id="newTask-upload-tip">
                                        <samp id="newTask-upload-tip-text" style="font-size: 15px; color:#888;">支持doc格式附件，附件大小不能超过4MB</samp>
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useNewTaskStore } from "@/store/newTask";
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue"; // 需要导入图标

const newTaskStore = useNewTaskStore();

const newfrom = ref({
    title: '',
    content: '',
    require: '',
    endTime: '',
    file: '',
});

const name = JSON.parse(localStorage.getItem("userInfo")).data.name;
const FormRef = ref();
const today = new Date();
const formattedDate = today.toISOString().split("T")[0];

function beforeToday(time) {
    const todayStartOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
    return time.getTime() < todayStartOfDay;
}

const rules = reactive({
    title: [
        { required: true, message: "请输入任务名称", trigger: "blur" },
    ],
    content: [
        { required: true, message: "请输入任务内容", trigger: "blur" },
    ]
});

// 提交按钮
const submit = () => {
    if (newfrom.value.title === "") {
        ElMessage.warning("请把任务名称填写完善！");
        return;
    }
    if (newfrom.value.content === "") {
        ElMessage.warning("请把任务内容填写完善！");
        return;
    }
    if (newfrom.value.endTime === "" || newfrom.value.endTime === null) {
        ElMessage.warning("请选择截止时间！");
        return;
    }

    newTaskStore.newTaskHadler(newfrom.value);
    console.log("提交的任务数据：", newfrom.value);
};

// 文件上传
const newUupload = ref(null);
const handleExceed = (files) => {
    newUupload.value.clearFiles();
    const file = files[0];
    file.uid = genFileId();
    newUupload.value.handleStart(file);
};

// 文件变化
const fileList = ref([]);
const fileUpload = (uploadFile) => {
    if (uploadFile.size / 1024 / 1024 > 4) {
        ElMessage.warning("文件大小不能超过 4MB!");
        fileList.value = [];
        return false;
    }
    newfrom.value.file = uploadFile.raw;
};

// 删除文件
const beforeRemove = async (uploadFile) => {
    try {
        await ElMessageBox.confirm(`是否删除 ${uploadFile.name} ?`);
        newfrom.value.file = null;
        return true;
    } catch {
        return false;
    }
};
</script>

<style>
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.div-icon {
    width: 10px;
    height: 20px;
    background-color: #335ca89a;
    margin-right: 5px;
}

.left-content {
    display: flex;
    align-items: center;
}

.buttons-right {
    display: flex;
    gap: 10px;
}

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.form-frame {
    width: 30%;
}

@media (max-width: 1200px) {
    .form-frame {
        width: 40%;
    }
}

@media (max-width: 1000px) {
    .form-frame {
        width: 60%;
    }
}

@media (max-width: 800px) {
    .form-frame {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .form-frame {
        width: 100%;
    }
    .buttons-right {
        gap: 0;
    }
    .div-icon {
        margin-right: 0;
    }
}
</style>
